<template>
	<div class="outer">
		<!-- 三级分类导航 -->
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<span href="#">全部结果</span>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<li class="with-x" v-if="$route.query.categoryName">
							{{ $route.query.categoryName }}
							<span class="iconfont icon-close" @click="delCategory"></span>
						</li>
						<li class="with-x" v-if="$route.query.keyword">
							{{ $route.query.keyword }}
							<span class="iconfont icon-close" @click="delKeyword"></span>
						</li>
						<li class="with-x" v-if="searchOptions.trademark">
							{{ searchOptions.trademark.split(':')[1] }}
							<span class="iconfont icon-close" @click="delTrademark"></span>
						</li>
						<li
							class="with-x"
							v-for="(props, index) in searchOptions.props"
							:key="index">
							{{ props.split(':')[2] + ':' + props.split(':')[1] }}
							<span class="iconfont icon-close" @click="delProps(index)"></span>
						</li>
					</ul>
				</div>

				<!-- 搜索器 -->
				<SearchSelector
					:trademarkList="trademarkList"
					:attrsList="attrsList"
					@searchTrademark="searchTrademark"
					@searchProps="searchProps" />

				<!--商品展示区-->
				<div class="details clearfix">
					<!-- 列表操作区 -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li
									:class="{ active: order.orderName === '1' }"
									@click="setOrder('1')">
									<a
										>综合
										<span
											v-show="order.orderName === '1'"
											:class="[
												'iconfont',
												`icon-${
													order.orderType === 'desc' ? 'falling' : 'rising'
												}`,
											]"></span
									></a>
								</li>
								<li>
									<a>销量</a>
								</li>
								<li>
									<a>新品</a>
								</li>
								<li>
									<a>评价</a>
								</li>
								<li>
									<a>价格</a>
								</li>
								<li
									:class="{ active: order.orderName === '2' }"
									@click="setOrder('2')">
									<a
										>价格
										<span
											v-show="order.orderName === '2'"
											:class="[
												'iconfont',
												`icon-${
													order.orderType === 'desc' ? 'falling' : 'rising'
												}`,
											]"></span
									></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li class="yui3-u-1-5" v-for="goods in goodsList" :key="goods.id">
								<div class="list-wrap">
									<div class="p-img">
										<router-link
											:to="{
												name: 'Detail',
												params: {
													id: goods.id,
												},
											}">
											<img :src="goods.defaultImg" />
										</router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i> {{ goods.price }} </i>
										</strong>
									</div>
									<div class="attr">
										<a>
											{{ goods.title }}
										</a>
									</div>
									<div class="commit">
										<i class="command">已有<span>2000</span>人评价</i>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<!-- 分页器 -->
					<div class="fr page">
						<div class="block">
							<!-- 
									current-page  当前页码 
									page-size 每页条数
									total 总数
									page-sizes 每页条数选项  页数大小
									layout 指定当前分页器加载什么组件

									size-change 当page-size发生变化时触发的事件
									current-change 当current-page发生改变触发的事件
							
							-->
							<!-- <el-pagination
								:current-page="searchOptions.pageNo"
								:page-sizes="[5, 10, 15, 20]"
								:page-size="searchOptions.pageSize"
								layout="jumper, prev, pager, next, total, sizes"
								:total="total">
							</el-pagination> -->
							<Pagination
								:current-page="searchOptions.pageNo"
								:page-size="searchOptions.pageSize"
								:page-sizes="[5, 10, 15, 20]"
								:total="total"
								@current-change="handleCurrentChange"
								@size-change="handleSizeChange">
							</Pagination>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import SearchSelector from './SearchSelector'
import Pagination from '@/components/Pagination'
import { reqSearchGoods } from '@/api/search'
import debounce from 'lodash/debounce'
export default {
	name: 'JSearch',
	components: {
		SearchSelector,
		Pagination,
	},
	data() {
		return {
			searchOptions: {
				props: [], // ["属性ID:属性值:属性名"]
				trademark: '', // "ID:品牌名称"
				order: '1:desc', //1: 综合    2: 价格   asc: 升序   desc: 降序
				pageNo: 1, // 页码
				pageSize: 5, // 每页数量
			},
			attrsList: [],
			goodsList: [],
			trademarkList: [],
			total: 0, // 总数量
		}
	},
	async mounted() {
		this.searchGoodsList()
	},
	methods: {
		// 封装发送获取商品展示函数
		async searchGoodsList() {
			const res = await reqSearchGoods({
				...this.searchOptions, // 品牌 综合 页码
				...this.$route.query, // 获取路径的query参数
			})
			this.attrsList = res.attrsList
			this.goodsList = res.goodsList
			this.trademarkList = res.trademarkList
			this.total = res.total
		},
		// 使用自定义事件 把子组件的商品id 和name 拿到
		searchTrademark(trademark) {
			this.searchOptions.trademark = trademark
			// 拿到后 再发送一个数据 更新页面
			this.searchGoodsList()
		},
		// 升序 降序
		setOrder(orderName) {
			let orderType = 'desc'
			// 解构当前的排序类型和标识
			const { orderName: name, orderType: type } = this.order
			// 判断点击标识和当前的标识是不是同一个
			if (orderName === name) {
				orderType = type === 'desc' ? 'asc' : 'desc'
			}
			console.log(this.order)

			// 重新设置order和发送请求
			this.searchOptions.order = `${orderName}:${orderType}`
			this.searchGoodsList()
		},
		// 获取商品参数信息
		searchProps(props) {
			if (this.searchOptions.props.includes(props)) return
			this.searchOptions.props.push(props)
			this.searchGoodsList()
		},
		// 删除面包屑 列表属性
		delCategory() {
			const keyword = this.$route.query.keyword
			const option = {
				name: 'Search',
			}
			if (keyword) {
				option.query = {
					keyword,
				}
			}
			this.$router.push(option)
		},
		// 删除关键字面包屑
		delKeyword() {
			const query = this.$route.query
			const option = {
				name: 'Search',
				query: {
					...query,
				},
			}
			delete option.query.keyword
			this.$router.push(option)
		},
		// 删除品牌面包屑
		delTrademark() {
			this.searchOptions.trademark = ''
			this.searchGoodsList()
		},
		// 删除商品参数列表
		delProps(index) {
			this.searchOptions.props.splice(index, 1)
			this.searchGoodsList()
		},
		// 获取子组件点击的页码 重新请求
		handleCurrentChange: debounce(function (currentPage) {
			this.searchOptions.pageNo = currentPage
			this.searchGoodsList()
		}, 300),
		// 获取子组件的每页数量 重新请求
		handleSizeChange(pageSize) {
			this.searchOptions.pageSize = pageSize
			this.searchGoodsList()
		},
	},
	watch: {
		$route() {
			this.searchGoodsList()
		},
	},
	computed: {
		order() {
			const [orderName, orderType] = this.searchOptions.order.split(':')
			return {
				orderName,
				orderType,
			}
		},
	},
}
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;

									i {
										margin-left: -5px;
									}
								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.page {
				display: flex;
				justify-content: center;
				height: 66px;
				align-items: center;
			}
		}
	}
}
.icon-close {
	vertical-align: middle;
}
</style>
